<template>
    <div>
        <el-breadcrumb separator-icon="ArrowRight" style="margin: 16px">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>申请管理</el-breadcrumb-item>
        <el-breadcrumb-item>缺寝申请</el-breadcrumb-item>
         </el-breadcrumb>
      <el-card style="margin: 15px; min-height: calc(100vh - 111px)">
        <div>
          <!--    功能区-->
          <div style="margin: 10px 0">
            <!--    搜索区-->
            <div style="margin: 10px 0">
                <div style="margin-bottom: 10px;">  
                    <span style="margin-right: 20px;">查询是否已审核的申请</span> 
                    <el-radio-group v-model="absStatus">
                    <el-radio label="1">已通过</el-radio>
                    <el-radio label="0">未通过</el-radio>
                    </el-radio-group>
                  
                </div>
                <div> 
                    <el-input v-model.trim="search" clearable placeholder="请输入学生姓名" prefix-icon="el-icon-search"
                        style="width: 20%"/>
                    <el-button icon="el-icon-search" @click="load" style="background-color: #143371; color: aliceblue;">搜索</el-button>
                    <el-button icon="el-icon-refresh-left" style="margin-left: 5px;background-color: #143371; color: aliceblue;"  @click="reset">重置</el-button></div>
                        
                 </div>
          </div>
          <!--    表格-->
          <el-table v-loading="loading" :data="tableData"  max-height="1000" style="width: 100%">
            <el-table-column label="#" type="index"/>
            <el-table-column v-if = 'false' label="单号" prop="absId"/>
            <el-table-column label="学生学号" prop="stuId"/>
            <el-table-column label="申请人姓名" prop="stuName"/> 
            <el-table-column label="房间号" prop="roomId"/>
            <el-table-column v-if ='false' label="审核宿管编号" prop="sgId"/>
            <el-table-column v-if ='false' label="宿管姓名" prop="sgName"/>
            <el-table-column label="申请原因" prop="absReason"/>
            <el-table-column label="申请时间" prop="absDate" />
            <el-table-column label="审核状态" prop="absStatus" :formatter="parseStatus"/>
            
            <!--      操作栏-->
            <el-table-column label="审核" width="150px" >
                <template slot-scope="scope">
                    <el-button 
                    size="mini"
                    type="primary"
                    @click="handleEdit(scope.row,true)">同意</el-button>
                    <el-button 
                    size="mini"
                    type="danger"
                    @click="handleEdit(scope.row,false)">拒绝</el-button>
            </template>
            </el-table-column>
          </el-table>
          <!--分页-->
          <div style="margin: 10px 0">
            <el-pagination
                :currentPage="currentPage"
                :page-size="pageSize"
                :page-sizes="[10, 20]"
                :total="total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </div>
      </el-card>
    </div>
  </template>
<script>
import request from '@/utils/request'
export default {
    name: "absentRoomInfo",
    data() {
        return {
            loading: true,
            absStatus:null,
            search: null,
            zbsgid:null,
            zbsgname:null,
            currentPage: 1,
            pageSize: 10,
            total: 0,
            tableData: [
                {
                    absId:null,
                    stuName:null,
                    stuId:null,
                    sgId:null,
                    roomId:null,
                    sgName:null,
                    absReason:null,
                    absDate:null,
                    absStatus:null
                }
            ],
            editDisplay: {
                display: "block",
            },
            display: {
                display: "none",
            },
        };
    },
    created() {
        this.load();
        this.loading = true;
        this.zbsgid=window.localStorage.getItem('user').sgId;
        this.zbsgname=window.localStorage.getItem('user').sgName;
        setTimeout(() => {
            //设置延迟执行
            this.loading = false;
        }, 1000);
    },
    methods:{
        async load(){
         console.log(this.form)
          request.get("/absent/find", {
                params: {
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                    search:this.search,
                    absStatus:this.absStatus
                },
            }).then((res) => {
                console.log(res);
                this.tableData = res.data.records;
                this.total = res.data.total;
                this.loading = false;
            });
        },

        parseStatus(row) {
         if(row.absStatus == null){
            return '未审核'
         }
         else if(!row.absStatus){
            return '不通过'
         }
         else {
            return '通过'
         }
        },
        onSubmit(){
            console.log(1);
        },
        reset() {
            this.search=null
            this.absStatus=null
            request.get("/absent/find", {
                params: {
                    pageNum: 1,
                    pageSize: this.pageSize,
                    search:null,
                    absStatus:null
                },
            }).then((res) => {
                console.log(res);
                this.tableData = res.data.records;
                this.total = res.data.total;
                this.loading = false;
            });
        },
        handleEdit(row,status){
                var rpParam ={
                    absId:null,
                    stuName:null,
                    stuId:null,
                    sgId:null,
                    roomId:null,
                    sgName:null,
                    absReason:null,
                    absDate:null,
                    absStatus:null
                }
                rpParam = JSON.parse(JSON.stringify(row));
                rpParam.absStatus=status
                rpParam.sgId=this.zbsgid
                rpParam.sgName=this.zbsgname
                request.put("/absent/update",rpParam).then(res=>{
                    if(res.code === "1"){
                    this.$message({
                      type:'success',
                      message:'修改成功'
                    })
                    this.search=null
                    this.absStatus=null
                    this.load();
                  }
                  else{
                    this.$message({
                      type:'error',
                      message:'修改失败'
                    })
                  }
                })
                
        },
        handleSizeChange(pageSize) {
            //改变每页个数
            this.pageSize = pageSize;
            this.load();
        },
        handleCurrentChange(pageNum) {
            //改变页码
            this.currentPage = pageNum;
            this.load();
        },

    }
    

}
</script>